<template>
	<view class="" id="page_wp">
		<view class="nav_tab"  :class="{'fixed': isFixed}">
			<view class="nav_item" :class="{'active':navIdx===1}" @click="navTap(1)">
				<view class="nav_tit">商品</view>
				<view>到店兑换</view>
			</view>
			<view class="nav_item" :class="{'active':navIdx===3}" @click="navTap(3)">
				<view class="nav_tit">评价</view>
				<view>{{evaNumber||0}}人评</view>
			</view>
			<!-- <view class="nav_item" :class="{'active':navIdx===2}" @click="navTap(2)">
				<view class="nav_tit">买单须知</view>
				<view>新人必看</view>
			</view> -->
			<view class="nav_item" :class="{'active':navIdx===4}" @click="navTap(4)">
				<view class="nav_tit">商家资质</view>
				<view>营业执照</view>
			</view>
		</view>
		<!-- <view class="notes" v-show="navIdx===2">
			<jyf-parser class="content" :html="discount.payinfo"></jyf-parser>
		</view> -->
		<view class="body" v-if="shopList&&shopList.length>0&&navIdx==1">
			<block v-if="uid==1305">
				<view style="width: 100%;padding:0 20rpx;">
					<view class="phone_input">
						<view class="phone_tip">一般0-3小时到账，最迟24小时到账</view>
						<view class="flex_between phone_s">
							<input class="phone_num" @input="handlephone" v-model="phoneNumber" @change="handlephone" type="number" maxlength="13" placeholder="请输入手机号">
							<view class="phone_type">
								<image v-if="mobile_type==1" src="https://img.jinghushi.com/images/9/2024/11/p3LkCYaq00qBLa8Kk6ycKB3QzQz6oR.png"></image>
								<image v-else-if="mobile_type==2" src="https://img.jinghushi.com/images/9/2024/11/yDsSXX93ueuuuUTd3nD7uTxeDUUM8u.png"></image>
								<image v-else-if="mobile_type==3" src="https://img.jinghushi.com/images/9/2024/11/cSAw1W2Y99dddjmSaD49Wd0p61YMyT.png"></image>
							</view>
						</view>
						<view class="phone_yy">请仔细核对需要充值号码<text v-if="mobile_yy!=''">（{{mobile_yy}}）</text></view>
						<view class="phone_tit"><text>充值套餐</text>不同套餐的到账时间和优惠折扣不同</view>
						<view class="flex_between rech_list">
							<view class="recharge_item" :class="{'recharge_item_active':rech_time==index}" @click="changeTime(index)" v-for="(item,index) in shopList[0].param.rechangetype">
								<!-- <view class="re_dis" v-if="index==1">{{shopList[0].discount[1]}}折</view> -->
								<!-- <view class="re_dis" v-if="index==2">{{shopList[0].discount[2]}}折</view> -->
								<view class="re_time">{{item}}</view>
							</view>
						</view>
						<!-- <view class="phone_con">充值后超过24小时未到账，系统会在失败后24小时之内原路退款，月初月末充值高峰期可能存在延时，着急请申请退单！</view> -->
						<view class="flex_between rech_list">
							<view class="recharge_item recharge_price" :class="{'recharge_item_active':rech_price==index}" @click="changePrice(index)" v-for="(item,index) in shopList[0].markprice">
								<view class="re_dis res_no" v-if="index==100.00&&oneStatus==0">缺货</view>
								<view class="re_dis res_no" v-if="index==200.00&&twoStatus==0">缺货</view>
								<view class="re_dis res_no" v-if="index==50.00&&threeStatus==0">缺货</view>
								<view class="re_time">{{index}}<text>元</text></view>
								<view class="re_price">售价{{item}}元</view>
							</view>
						</view>
					</view>
					<image src="https://img.jinghushi.com/images/9/2024/11/eoalODZOZOZLlMEnYWlOYWYMyEDoOo.png" mode="widthFix" style="width: 100%;"></image>
				</view>
			</block>
			<block v-else>
				<view class="menu_list" :class="{'fixed_menu': isFixed}">
					<text class="menu_li" v-for="item in shopMenu" :class="{'active':menuIdx===item.id}"
						@click="menuTap(item.id)">
						<text style="font-weight: bold;">{{item.title}}</text>
					</text>
				</view>
				<view class="shop_list" :class="{'padding_body': isFixed}" id="body">
					<view class="list_wp" v-for="(item,idx) in shopList" :id="setId(item.id)" :key="idx">
						<view class="l_title1" v-if="item.title== '团购'">{{item.title}}(到店兑换)</view>
						<view class="l_title" v-if="item.title!= '团购'">{{item.title}}</view>
						<view class="shop_li" v-for="citem in item.goodsList" :key="citem.id"
							@click="citem.isgroup==1&&$navTo('/pages/product/groupbuy?id='+citem.id)">
							<image :src="citem.img"  @click.stop="prevImage(citem.img)"></image>
							<view class="shop_right">
								<text class="title">{{citem.title}}</text>
								<view class="sales"v-if="citem.isgroup==1">已售 {{citem.sales}}</view>
								<view class="m_money_g"v-if="citem.isgroup==1">
									<view class="m_money_flex">
										<text><text class="m_money_samll">￥</text>{{citem.price}}</text>
										<view class="sales_z"v-if="citem.isgroup==1">{{citem.mark}}</view>
										<text class="m_old" v-if="citem.isgroup==1">¥{{citem.productprice}}</text>
									</view>
									<button size="mini">抢购</button>
								</view>
								<view class="s_butie">最高补贴{{Number(citem.btrate)}}%</view>
								<view class="m_money"v-if="citem.isgroup!=1">{{citem.price}}</view>
								<view class="price" v-if="citem.isgroup!=1">
									<view class="grade grade1" v-if="merchInfo.discount!=10.00">
										<text>¥{{citem.cusprice}}</text>
										<text class="label">优惠买单</text>
									</view>
								</view>
							</view>
							<view class="s_label">
								<text class="content" v-for="label in citem.labels">{{label}}</text>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view v-if="navIdx==1&&shopList.length<=0" class="none">本店暂未上架团购及产品<br>可到店消费使用线下付款</view>
		<view v-if="navIdx==3" class="evaluates">
			<evaluates :evaList="evaList" :isempty="isempty" :isloading="isloading"></evaluates>
		</view>
		<view v-if="navIdx==4" class="merch">
			<block v-if="merchInfo.businesslicense||(merchInfo.qualified&&merchInfo.qualified.length>0)">
				<image :src="merchInfo.businesslicense"></image>
				<image v-for="img in merchInfo.qualified" :src="img"></image>
			</block>
			<view v-else class="none">商家暂未上传资质</view>
		</view>
		<view class="s_button" v-if="uid==1305">
			<view class="s_share" @click="openShare1">分享店铺</view>
			<view class="s_pay" @click="toBuyReal" v-if="isClick==1">立即充值</view>
			<view class="s_pay opacity5" v-else-if="isClick==2">已售罄</view>
			<view class="s_pay opacity5" v-else>立即充值</view>
		</view>
		<uni-popup ref="sure_popup" background-color="#fff" type="center">
			<view class="sure_content">
				<view class="sure_tit">提示</view>
				<view>请确认充值号码为</view>
				<view class="sure_num">{{phoneNumber}}</view>
				<view class="flex_between">
					<view class="sure_btn" @click="cancelSubmit">取消充值</view>
					<view class="sure_btn sure_btn2" @click="toSubmit">继续充值</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import evaluates from './evaluates.vue'
	export default {
		name: 'MenuList',
		props: {
			uid:{
				type: [Number,String],
				default: ''
			},
			discount:{
				type:Object,
				default: {}
			},
			merchInfo:{
				type:Object,
				default: {}
			},
			phoneNumberOld:{
				type:String,
				default: ''
			}
		},
		components: {
			evaluates
		},
		data() {
			return {
				navIdx: 1,
				menuIdx: 1,
				oldTop: '',
				shopMenu: [],
				shopList: [],
				isFixed: false,
				evaList:[],
				page: 0,
				isempty: false,
				isloading: false,
				evaNumber: 0,
				phoneNumber: '',
				mobile_type: 0, 
				mobile_yy: '',
				rech_time:1,
				rech_price:-1,
				goodsid: 0,
				isClick: 0,
				oneStatus: 1,
				twoStatus: 1,
				threeStatus: 1,
			}
		},
		watch:{
			phoneNumberOld(newval){
				console.log('检测到有绑定手机号了')
				if(newval!=''){
					let value = newval.replace(/\D/g, '').substr(0, 11)
					let len = value.length //获取长度判断
					if (len > 3 && len < 8) {
						value = value.replace(/^(\d{3})/g, '$1 ')
					} else if (len >= 8) {
						value = value.replace(/^(\d{3})(\d{4})/g, '$1 $2 ')
					}
					this.phoneNumber = value
					this.retPhoneToJs(Number(newval.slice(0,3)));
				}
			},
		},
		mounted() {
			this.getshopMenu();
			// #ifdef MP-ALIPAY
			setTimeout(()=>{
				this.getList();
				this.getEvaList();
			},50)
			// #endif
			// #ifdef MP-WEIXIN
			this.getList();
			this.getEvaList();
			// #endif
			if (!uni.getStorageSync('token')) {
				return;
			}
			let that = this;
			uni.$on('onPageScroll', () => {
				let query = uni.createSelectorQuery().in(that);
				query.select('#page_wp').boundingClientRect(data => {
					that.isFixed = data.top <= 0 ? true : false;
				}).exec();
			})
			uni.$on('getEva',()=>{
				this.getEvaList()
			})
		},
		methods: {
			openShare1(){
				this.$emit('openShare');
			},
			toBuyReal(){
				if(this.goodsid!=0){
					// 如果为电信，先提示
					if(this.mobile_type==3){
						uni.showModal({
							title: '提示',
							content: '请确保您的电信号码余额大于0元，否则无法售后。是否继续充值？',
							cancelText: '取消充值',
							confirmText: '继续充值',
							confirmColor: '#8615E1',
							success: res=> {
								if (res.confirm) {
									this.$refs.sure_popup.open();
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}else{
						this.$refs.sure_popup.open();
					}	
				}
			},
			toSubmit(){
				uni.navigateTo({
					url: '/pages/order/createOrder?type=2&id='+this.goodsid+'&optionid=0&total=1&mobile='+this.phoneNumber.replace(/\s/g, '')
				})
				this.$refs.sure_popup.close();
			},
			cancelSubmit(){
				this.$refs.sure_popup.close();
			},
			changeInput(e){
				console.log(e.detail.value)
			},
			handlephone(e) {
				if(e){
					if(e.target.value.length<13){
						this.mobile_type = 0;
						this.mobile_yy = '';
						this.rech_time = 1;
						this.rech_price = -1;
						this.goodsid = 0;
						this.isClick = 0;
						this.oneStatus = 1;
						this.twoStatus = 1;
						this.threeStatus = 1;
					}
					if (e.target.value.length==13) {
						this.retPhoneToJs(Number(e.target.value));
					}
				}
				this.$nextTick(() => {//使用$nextTick()来确保每次改变都调用函数
					//输入字段检测是否合法，如符号和字母
					let value = this.phoneNumber.replace(/\D/g, '').substr(0, 11)
					let len = value.length //获取长度判断
					if (len > 3 && len < 8) {
						value = value.replace(/^(\d{3})/g, '$1 ')
					} else if (len >= 8) {
						value = value.replace(/^(\d{3})(\d{4})/g, '$1 $2 ')
					}
					this.phoneNumber = value
				})
			},
			retPhoneToJs(data) {
				console.log('请求接口，判断运营商')
				this.$axios('supplierGoods/ismobile','POST','shop',{
					mobile: this.phoneNumber.replace(/\s/g, '')
				}).then(res=>{
					if(res.data.code == 200){
						this.mobile_type = res.data.data.type;
						this.mobile_yy = res.data.data.msg;
						this.getGoodsId();
					}else{
						this.mobile_type = 0;
						this.mobile_yy = '';
					}
				})
			},
			changeTime(val){
				uni.hideToast()
				if(this.phoneNumber.length<13){
					return this.$api.msg('请检查手机号是否输入正确');
				}
				this.rech_price = -1;
				this.rech_time = val;
				this.getGoodsId();
			},
			changePrice(val){
				uni.hideToast()
				if(this.phoneNumber.length<13){
					return this.$api.msg('请检查手机号是否输入正确');
				}
				if(val==100.00&&this.oneStatus==0){
					this.$api.msg('选项已售罄');
					return;
				}
				if(val==200.00&&this.twoStatus==0){
					this.$api.msg('选项已售罄');
					return;
				}
				if(val==50.00&&this.threeStatus==0){
					this.$api.msg('选项已售罄');
					return;
				}
				this.rech_price = val;
				this.getGoodsId();
			},
			getGoodsId(){
				console.log('判断当前运营商是否缺货')
				this.goodsid = 0;
				this.isClick = 0;
				this.oneStatus = 1;
				this.twoStatus = 1;
				this.threeStatus = 1;
				// 判断是否缺货
				if(this.rech_time!=-1&&this.mobile_type!=0){
					this.shopList[0].goodsList.forEach(item=>{
						if(item.mobiletype==this.mobile_type&&item.rechangetype==this.rech_time&&item.total==0&&item.productprice==100.00){
							this.oneStatus = 0;
						}
						if(item.mobiletype==this.mobile_type&&item.rechangetype==this.rech_time&&item.total==0&&item.productprice==200.00){
							this.twoStatus = 0;
						}
						if(item.mobiletype==this.mobile_type&&item.rechangetype==this.rech_time&&item.total==0&&item.productprice==50.00){
							this.threeStatus = 0;
						}
					})
				}
				// 选中对应商品
				if(this.rech_time!=-1&&this.rech_price!=-1&&this.mobile_type!=0){
					this.shopList[0].goodsList.forEach(item=>{
						if(item.mobiletype==this.mobile_type&&item.rechangetype==this.rech_time&&item.productprice==this.rech_price&&item.total!=0){
							this.goodsid = item.id;
							this.isClick = 1;
							console.log(this.goodsid);
						}
					})
					if(this.goodsid==0){
						this.$api.msg('选项已售罄');
						this.isClick = 2;
					}
				}
			},
			getEvaList(){
				this.isloading = true;
				this.isempty = false;
				this.page++;
				this.$axios('Index/getShopComment', 'POST', 'supplier', {
					uid: this.uid,
					page: this.page
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						this.evaNumber = res.data.data.cut;
						this.evaList = [...this.evaList, ...res.data.data.list];
						this.isempty = res.data.data.list.length <= 0;
					}
				})
			},
			getshopMenu() {
				this.$axios('supplierGoods/cate', 'POST', 'shop', {
					uid: this.uid
				}).then(res => {
					if (res.data.code == 200) {
						this.shopMenu = res.data.data;
						// if(this.shopMenu[0].title=='团购'){
						// 	this.shopMenu.shift();
						// }
						this.menuIdx = this.shopMenu.length > 0 ? this.shopMenu[0].id : '';
					}
				})
			},
			getList() {
				console.log(this.uid)
				this.$axios('supplierGoods/goodsList', 'POST', 'shop', {
					uid: this.uid
				}).then(res => {
					if (res.data.code == 200) {
						this.shopList = res.data.data;
						// 如果没有团购商品，则不显示团购菜单
						if(res.data.data&&res.data.data.length>0){
							if(res.data.data[0].title!=="团购"){
								this.menuIdx = this.shopMenu[1].id;
								this.shopMenu.shift();
							}else{
								// this.rech_price = this.shopList[0].goodsList[0].id;
							}
							// else{
							// 	this.shopList.shift();
							// }
						}else{
							this.shopList = [];
						}
					}
				})
			},
			navTap(v) {
				if (this.navIdx === v) return;
				this.navIdx = v;
			},
			menuTap(v) {
				if (this.menuIdx === v) return;
				this.menuIdx = v;
				this.setpPage('#list' + v);
			},
			setId(v) {
				return 'list' + v;
			},
			setpPage(id) {
				let query = uni.createSelectorQuery().in(this);
				const promise = new Promise((res, rej) => {
					query.select('#body').boundingClientRect(data => {
						this.oldTop = this.oldTop === '' ? data.top : this.oldTop;
						res(data);
					}).exec()
				})
				promise.then(res => {
					query.select(id).boundingClientRect(data => {
						uni.pageScrollTo({
							duration: 10,
							// scrollTop: data.top - res.top + this.oldTop - 84,
							scrollTop: data.top - res.top - 10
						})
					}).exec()
				})
			},
			prevImage(url){
				console.log(url)
				let arr = [];
				arr[0] = url;
				uni.previewImage({
					current: 0,
					urls: arr
				})
			}
		}
	}
</script>

<style lang="scss">
	.page_wp{
		background: #f8f8f8;
		padding-bottom: 70rpx;
	}
	.sure_content{
		padding: 40rpx;
		text-align: center;
		font-size: 32rpx;
		.sure_tit{
			font-size: 38rpx;
			margin-bottom: 20rpx;
			font-weight: bold;
		}
		.sure_num{
			font-size: 44rpx;
			font-weight: bold;
			margin-bottom: 34rpx;
			margin-top: 14rpx;
			color: #AF141D;
		}
		.sure_btn{
			width: 210rpx;
			line-height: 70rpx;
			box-shadow: 0rpx 0rpx 26rpx 0rpx rgba(243,232,252,0.5);
			border-radius: 12rpx;
			border: 2rpx solid #8615E1;
			color: #8615E1;
			text-align: center;
			font-size: 30rpx;
		}
		.sure_btn2{
			background: linear-gradient( 90deg, #A350E8 0%, #4E07A9 100%);
			box-shadow: 0rpx 0rpx 26rpx 0rpx rgba(243,232,252,0.5);
			color: #FFFFFF;
			margin-left: 50rpx;
		}
	}
	.none{
		text-align: center;
		margin-top: 30rpx;
		font-weight: bold;
	}
	.fixed {
	    background: #fff;
	    position: fixed;
	    top: 0;
	    width: 100%;
	    z-index: 98;
		left: 0;
	}
	.fixed_menu{
		position: fixed;
		top: 86rpx;
		width: 100%;
		z-index: 900;
		left: 0;
	}
	.padding_body{
		margin-left: 27%!important;
	}
	.nav_tab {
		padding: 20rpx;
		font-size: 20rpx;
		color: #999999;
		display: flex;
		background: #f8f8f8;
		.nav_item{
			margin-right: 40rpx;
			text-align: center;
			.nav_tit{
				color: #333333;
				font-size: 32rpx;
				font-weight: 600;
			}	
		}
		.active {
			color: #A222E9;
			.nav_tit{
				color: #A222E9;
			}
		}
	}
	.phone_input{
		background: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		padding: 30rpx 20rpx 40rpx;
		.phone_s{
			// padding: 30rpx 0;
		}
		.phone_num{
			font-size: 50rpx;
			font-weight: bold;
			flex: 1;
			height: 140rpx;
		}
		.phone_type{
			width: 230rpx;
			height: 70rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.phone_yy{
			color: #999;
			font-size: 26rpx;
			margin-top: 10rpx;
			padding-bottom: 30rpx;
		}
		.phone_tip{
			background: #fafafb;
			color:#ff335b;
			font-size: 24rpx;
			padding: 10rpx;
			// margin-top: 20rpx;
		}
		.phone_tit{
			color: #999;
			font-size: 24rpx;
			margin-top: 20rpx;
			text{
				font-size: 32rpx;
				font-weight: bold;
				margin-right: 26rpx;
				color: #333;
			}
		}
		.rech_list{
			flex-wrap: wrap;
			&::after{
				width: 31.5%;
				content: '';
				display: block;
			}
		}
		.recharge_item{
			border: 2rpx solid #a1a1b4;
			border-radius: 16rpx;
			margin-top: 30rpx;
			position: relative;
			width: 31.5%;
			text-align: center;
			color: #a1a1b4;
			padding: 34rpx 0;
			white-space: nowrap;
			overflow: hidden;
			.re_dis{
				border-top-left-radius: 14rpx;
				border-bottom-right-radius: 14rpx;
				background: $bg-color;
				font-size: 20rpx;
				position: absolute;
				left: 0;
				top: 0;
				color: #fff;
				padding: 2rpx 20rpx;
			}
			.res_no{
				background: #a1a1b4;
			}
			.re_time{
				font-weight: bold;
				font-size: 30rpx;
				text{
					font-size: 26rpx;
				}
			}
		}
		.recharge_item_active{
			border: 2rpx solid $bg-color;
			background: #f0dffe;
			color: $bg-color;
		}
		.recharge_price{
			.re_time{
				font-size: 40rpx;
			}
		}
		.phone_con{
			color: #999;
			padding: 0 20rpx;
			margin-top: 20rpx;
		}
	}
	.s_button {
		height: 148rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20upx;
		position: fixed;
		width: 100%;
		bottom: 0;
		text-align: center;
		z-index: 98;
		padding-top: 20rpx;
		
		.s_pay {
			width: 335rpx;
			height: 74rpx;
			background: linear-gradient( 270deg, #8917E2 0%, #B92DF1 100%);
			border-radius: 38rpx;
			line-height: 74rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}
	
	.body {
		display: flex;
		overflow: hidden;
		// padding-top: 20upx;

		.menu_list {
			background: #fff;
			width: 25%;

			.menu_li {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 20upx;
				height: 110upx;

				text {
					width: 100%;
				}
			}

			.menu_li:nth-of-type(1) {
				padding-top: 20upx;
			}

			.active {
				background: #f8f8f8;
			}
		}

		.shop_list {
			flex: 1;
			margin-left: 20rpx;
			background: #fff;
			padding-left: 20rpx;
			.list_wp {
				.l_title {
					color: $bg-color;
					font-size: 30rpx;
					padding: 10upx 10upx;
					margin-right: 10rpx;
					font-weight: bold;
					&::before{
						content: "";
						width: 10rpx;
						height: 25rpx;
						background: $bg-color;
						display: inline-block;
						margin-right: 10rpx;
						border-radius: 10rpx;
					}
				}
				.l_title1 {
					color: #590bc7;
					font-size: 30rpx;
					padding: 10upx 10upx;
					margin-right: 10rpx;
					font-weight: bold;
					&::before{
						content: "";
						width: 10rpx;
						height: 25rpx;
						background: #590bc7;
						display: inline-block;
						margin-right: 10rpx;
						border-radius: 10rpx;
					}
				}
			}

			.shop_li {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				padding-bottom: 20upx;

				image {
					border-radius: 12upx;
					height: 134upx;
					width: 134upx;
				}

				.shop_right {
					box-sizing: border-box;
					padding-left:20upx;
					width: calc(100% - 155upx);

					.title {
						color: #000;
						font-weight: bold;
						font-size: 30upx;
					}
					.sales {
						color: #999;
						font-size: 25upx;
					}
					.s_butie{
						color: $bg-color;
						font-size: 22rpx;
					}
					.m_money_g {
						color: #AF141D;
						font-size: 40rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.m_money_flex{
							display: flex;
							align-items: center;
							font-weight: bold;
							.sales_z {
								height: 34rpx;
								line-height: 34rpx;
								color: #8615E1;
								font-size: 20rpx;
								text-align:center;
								border-radius: 8upx;
								border: 2rpx solid #8615E1;
								padding: 0 4rpx;
								font-weight: 400;
								margin-left: 8rpx;
							}
							.m_money_samll{
								font-size: 24rpx;
								font-weight: 400;
							}
							.m_old{
								font-size: 20rpx;
								color: #999;
								padding-left: 10rpx;
								text-decoration: line-through;
								font-weight: 400;
							}
						}
						button{
							width: 96rpx;
							height: 48rpx;
							background: linear-gradient( 90deg, #EF7060 0%, #E14838 100%);
							border-radius: 26rpx;
							line-height: 48rpx;
							color: #fff;
							margin: 0;
							font-size: 24rpx;
							padding: 0;
							&::after{
								border: none;
							}
						}
					}
					.m_money {
						color: #444;
						font-size: 24upx;
						margin: 0upx 0upx 0upx 6upx;
					}

					.m_money::before {
						content: '￥';
						font-size: 20upx;
					}

					.price {
						padding-top: 10upx;
						display: flex;
						align-items: center;

						.grade {
							color: $bg-color;
							font-size: 24upx;

							.label {
								background: #000;
								border-radius: 10upx;
								color: #f3dd91;
								padding: 4upx 8upx;
							}

							text {
								font-weight: bold;
								padding: 0 10upx;
							}
						}

						.grade1 {
							.label {
								background: #000;
								color: #f3dd91;
							}
						}
					}
				}

				.s_label {
					display: flex;
					align-items: center;
					padding-top: 20upx;
					flex: 1;
					flex-wrap: wrap;
					.content {
						border: 1px #DCDFE6 solid;
						border-radius: 10upx;
						line-height: 40upx;
						margin-right: 10upx;
						padding: 0 10upx;
						margin-bottom: 10rpx;
					}
				}
			}

		}
	}
	.merch{
		padding: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		image{
			margin-bottom: 15rpx;
			width: 340rpx;
			height: 200rpx;
			border-radius: 15rpx;
		}
	}
</style>